<template>
  <div id="app">
    <HeaderMain />
    <div class="left_bg"></div>
    <div class="right_bg"></div>
    <router-view />
  </div>
</template>

<script>
import HeaderMain from '@/components/common/headerMain/index.vue'
import autofit from '@/utils/autofit.js'
export default {
  name: "App",
  components: {
    HeaderMain
  },
  mounted() {
    autofit.init(
      {
        designHeight: 1080,
        designWidth: 1920,
        renderDom: '#app',
        resize: true,
        ignore: ['.map'],
        // 是否等比例适配大屏
        isEqal: false,
      },
      true
    )
    document.querySelector('body').setAttribute('style', 'background: #000;')
  },
}
</script>
<style lang="scss">
#app {
  width: 1920px;
  height: 1080px;
  position: relative;
  color: #2c3e50;
  overflow: hidden;
  .left_bg{
    width: 538px;
    height: 1080px;
    position: absolute;
    left: 0;
    top: 0;
    background: url(~@/assets/img/panel/panel-bg-left.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1001;
  }
  .right_bg{
    width: 538px;
    height: 1080px;
    position: absolute;
    right: 0;
    top: 0;
    background: url(~@/assets/img/panel/panel-bg-right.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1001;
  }
}
</style>
